<template>
  <div>
    <ul>
      <span v-if="isShow"> 展示出来 </span>
      <span v-else> 默认不展示 </span>
      <com-base v-for="item in items" :key="item" :name="item" />
      <button v-on:click.stop="handleSwitch">切换</button>
    </ul>
    <child-example @handleClick="handleClick">
      <!-- <span slot="pre-icon">前置图标</span>
      <span slot="next-icon">后置图标</span> -->
      <template v-slot:pre-icon="{value}">
        <span>前置图标{{ value }}</span>
      </template>
      <!-- <template v-slot:next-icon>
        <span slot="next-icon">后置图标</span>
      </template> -->
    </child-example>
    <input type="text" v-model="message" />
    <input type="text" :value="message" @input="handleInput" />
    {{ message }}

    <input type="text" v-model="title" />
    <base-checkbox v-model="lovingVue" @focus.native="onFocus" :title="title" @update:title="title=$event"></base-checkbox>
    {{ lovingVue }}

    <div>
      <input type="text" v-model="firstName" />
      <input type="text" v-model="lastName" />
      {{ fullName }}
    </div>
  </div>
</template>

<script>
import Vue from 'vue';

Vue.component("com-base", {
  props: {
    name: {
      type: String
    }
  },
  template: '<li> {{ name }} </li>'
})

Vue.component("child-example", {
  data: function() {
    return {
      counter: 0,
      value: Math.random()
    }
  },
  template: `<div>
    <slot name="pre-icon" :value="value"></slot>
    <button @click="$emit('handleClick', counter)">按钮</button>
    <slot name="next-icon">😊</slot>
  </div>`
})

Vue.component("base-checkbox", {
  model: {
    prop: 'checked',
    event: 'change'
  },
  props: {
    checked: Boolean,
    title: String
  },
  template: `
    <label>
      <input 
        type="checkbox" 
        :value="checked" 
        @change='$emit("change", $event.target.checked)' 
      />
      {{ title }}
      <button @click="handleClick">按钮</button>
    </label>
  `,
  methods: {
    handleClick() {
      this.$emit("update:title", "更新的数据")
    }
  }
})

export default {
  data: function() {
    return {
      items: [
        "item1",
        "item2",
        "item3",
        "item4",
      ],
      isShow: true,
      message: '',
      lovingVue: true,
      title: "选项一",
      firstName: '',
      lastName: '',
      fullName: ''
    }
  },
  computed: {
    // fullName: function() {
    //   return this.firstName + " " + this.lastName;
    // }
  },
  watch: {
    firstName: function() {
      this.fullName = this.firstName + " " + this.lastName;
    },
    lastName: function() {
      this.fullName = this.firstName + " " + this.lastName;
      
    }
  },
  methods: {
    handleSwitch() {
      this.isShow = !this.isShow;
    },
    handleClick(count) {
      console.log(count);
    },
    handleInput(e) {
      this.message = e.target.value;
    },
    onFocus(e) {
      console.log(e.target.value);
    }
  }
}
</script>

<style>

</style>